<template>
  <div>
      <el-header class="top_bar">           
            <div>
                <img src="../../assets/logo.png" style="width:45px; height:45px">
                <span>博客管理系统</span>
            </div>
           
            <div>
             
              <el-dropdown trigger="click" @command="handleCommand">
              <span class="el-dropdown-link" style="color:white;">
                {{adminName}}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">

                <el-dropdown-item icon="el-icon-circle-check" command="loginout">退出</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-check" command="mangedata">登陆后台</el-dropdown-item>
              </el-dropdown-menu>
              
            </el-dropdown>
              
            </div>
      </el-header>

  
    <el-header>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content">
            <el-col>
              <el-row style="padding-top:20px">
                <el-col :span="8">
                  <img
                    src="../../assets/img.jpg"
                    alt=""
                    class="userlogo"
                  />
                </el-col>
                <el-col :span="16">
                  <h2>{{ username }}</h2>
                  <span>普通用户</span>
                </el-col>
              </el-row>
              <el-divider></el-divider>
              <el-row>
                <el-descriptions :column="1">
                  <el-descriptions-item label="上次登录时间">{{
                    lastLoginAt | moment
                  }}</el-descriptions-item>
                  <el-descriptions-item label="上次登陆地点"
                    >陕西</el-descriptions-item
                  >
                </el-descriptions>
              </el-row>
            </el-col>

            <el-col class="descripe_font">
              <h5>语言详情</h5>

              <el-divider></el-divider>
              Vue
              <el-progress :percentage="50"></el-progress>
              JavaScript
              <el-progress :percentage="75" color="pink"></el-progress>
              CSS
              <el-progress :percentage="60.7" color="orange"></el-progress>
              HTML
              <el-progress :percentage="66.6" color="red"></el-progress>
            </el-col>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content">
            <el-row :gutter="20" style="padding-top: 20px;">
              <el-col
                :span="8"
                class="show_data"
                v-for="items in showData"
                :key="items.data"
              >
                <div class="show_data_position">
                  <img :src="items.url" class="show_data_img" />
                  <div class="show_data_font">
                    <h2>{{ items.data }}</h2>
                    <span>{{ items.descipt }}</span>
                  </div>
                </div>
              </el-col>

              <el-col>
                <div>
                  <button style="float: right" @click="handleClear">
                    清空
                  </button>
                  <h3>待办事项</h3>
                  
                  <p v-for="(item, index) in todos" :key="index">
                    <input type="checkbox" v-model="item.done" />
                    <span v-bind:class="{ done: item.done }">{{
                      item.title
                    }}</span>

                    <button
                      @click="handleRemoveTodoClick(index)"
                      style="float: right; border: none"
                    >
                      <i class="el-icon-delete"></i>
                    </button>
                  </p>
                  <input
                    type="text"
                    v-model="todoText"
                    @keydown.enter="handleAddTodoClick"
                  />
                  <button @click="handleAddTodoClick">Add</button>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">

        <!-- echart图表 -->
        <el-col :span="12">
          
          <Chart id='line' :option='lineOption'/>
        </el-col>
        <el-col :span="12">
          <Chart id='bar' :option='barOption'/>
        </el-col>
      </el-row>
    </el-header>
  </div>
</template>

<script>

import Chart from './Chart'
export default {
  components: { Chart },
  data() {
    return {
      username: "",
      lastLoginAt: localStorage.getItem("adminLastLoginAt"),
      adminName:localStorage.getItem('adminName'),
      role:localStorage.getItem('role'),
      showData: [
        {
          url: require("../../assets/gallery_3.jpg"),
          data: 1234,
          descipt: "用户访问量",
        },
        {
          data: 321,
          descipt: "系统消息",
          url: require("../../assets/gallery_3.jpg"),
        },
        {
          data: 500,
          descipt: "数量",
          url: require("../../assets/gallery_3.jpg"),
        },
      ],
      todos: [
        {
          id: 1,
          title: "吃饭",
          done: true,
        },
        {
          id: 2,
          title: "睡觉",
          done: false,
        },
        {
          id: 3,
          title: "敲代码",
          done: true,
        },
        {
          id: 4,
          title: "遇见bug",
          done: true,
        },
        {
          id: 5,
          title: "处理bug",
          done: true,
        },
        {
          id: 6,
          title: "修复完成",
          done: true,
        },
      ],
      imgArr: [
        {
          imgurl:
            "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
        },
        {
          imgurl:
            "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
        },
        {
          imgurl:
            "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
        },
      ],
      todoText: "",
      barOption: {},
      lineOption: {}
    };
  },
  mounted() {
    this.username = localStorage.getItem("name");
    this.barOption = this.getData('bar');
    this.lineOption = this.getData('line');
  },
  methods: {
    handleAddTodoClick() {
      const todoText = this.todoText.trim();
      if (!todoText.length) {
        return;
      }
      const todos = this.todos;

      todos.push({
        id: todos[todos.length - 1].id + 1,
        title: todoText,
        done: false,
      });
      this.todoText = "";
    },
    handleRemoveTodoClick(index) {
      this.todos.splice(index, 1);
    },
    handleClear() {
      this.todos = {};
    },
   
    handleCommand(command){
      if(command=='loginout'){
                  
                  localStorage.clear();
                  this.$router.push('/login')
                }
      else if(command=="mangedata"){
        if(this.role==1){
           this.$confirm('您是超级管理员, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'success'
            }).then(res=>{
                this.$router.push("/dashboard");
            })
        }else{
           this.$confirm('您不是超级管理员，请联系超级管理员', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warn'
            }).then(res=>{ 
              // this.$router.push("/login")
            })
        }
        
        
      }
    },
    getData(type) {
        let res = {
            x: ["一", "二", "三", "四", "五", "六", "七"],
            y1: [5, 40, 36, 30, 10, 20, 32],
            y2: [23, 66, 49, 20, 56, 40, 42]
        }
      return {
        title: { text: "最近七天每天用户访问量" },
        tooltip: {},
        xAxis: {
          data: res.x,
          axisLine: {
            lineStyle: {
              color: "#BB3137",
            },
          },
        },
        yAxis: {},
        series: [
          {
            name: "访问量",
            type: type,
            data: res.y1,
          },
          {
            name: "上周访问量",
            type: type,
            data: res.y2,
          },
        ],
      };
    },
  }
};
</script>

<style scoped>



.top_bar {
  background: rgb(55, 62, 65);
  display: flex;
  justify-content: space-between;
 
  color: #fff;
  font-size: 18px;
  position: relative;
  /* justify-content: center; */
  align-items: center;
}

.top_bar img {
  vertical-align: middle;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.done {
  text-decoration: line-through;
  color: #ccc;
}
.el-divider {
  margin: 3px 0;
}
.bg-purple {
  background: #d3dce6;
}
.descripe_font {
  font-size: 12px;
  font-weight: 500;
  margin-top: 15px;
}
.grid-content {
  border-radius: 4px;
  min-height: 400px;
}
.userlogo {
  border-radius: 100%;
  
  box-sizing: border-box;
  width: 60px;
}
.show_data {
  vertical-align: middle;
  
}

.show_data_font {
  float: right;
  padding-right: 32px;
  padding-top: 3px;
  
}
.show_data_position{
  background: #324157;
  height: 58px;
  color: white;
}
h2 {
  margin: 0;
  color: #409eff;
}
</style>